import React, { Component } from 'react'
import axios from 'axios'
import { Form, Input, Button, message } from 'antd';
interface Istate {

}
interface Iprops {
    history: any
}
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

const key = '稍等';
class Register extends Component<Iprops, Istate> {
    openMessage = (data:any) => {
        message.loading({ content: 'Loading...', key });
        setTimeout(() => {
          message.success({ content: data, key, duration: 2 });
        }, 1000);
      };
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    onFinish = (values: any) => {
        console.log('Success:', values);
        let { username, password, phone } = values;
        if (username != '' && password != '' && phone != '') {
            if (/\w{4,6}/.test(password) && /\d{11}/.test(phone)) {
                axios.post('api/register', {
                    username,
                    password,
                    phone
                }).then(res => {
                    console.log(res)

                    if (res.data.code === 1) {
                        this.openMessage(res.data.msg)
                        setTimeout(() => {
                            this.props.history.push('/login')
                          }, 1000);
                    } else {
                        alert('注册失败')
                    }
                })
            } else {
                alert('参数有误')
            }
        } else {
            alert('没有填完')
        }
    };
    render() {
        return (
            <div className="reg-page wrap">
                <h3>注册页面</h3>
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="电话"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your phone!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            注册
        </Button>

                        <span onClick={() => this.props.history.push('/login')}>已有账号！  去登陆</span>
                    </Form.Item>
                </Form>
            </div>
        )
    }
    
}

export default Register
